import React, { useCallback } from "react";
import { Outlet, Link } from "react-router-dom";
import { Col, Button,Image, Row, Avatar, Space, message } from 'antd';

import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import {  UserOutlined,LoginOutlined } from '@ant-design/icons';



function Mine() {
    const navigate = useNavigate()
    // 从redux获取用户数据
    const userInfo = useSelector(function (state) {
        return state.userInfo
    })
    const dispatch = useDispatch()

    const logout = useCallback(() => {
        //删除存储中的用户登录信息
        dispatch({ type: 'logout' })
    })

    const goLogin = useCallback(function () {
        navigate("/index/mine/login")
    }, [])

    return (
        <>  <div style={{height:500, width: '100%',}}>
                <Row style={{backgroundColor: 'rgb(255, 118, 32)',height:300}}>
                    <Col span={8}>
                        {
                            userInfo.username ?
                                <div style={{position:'relative',top:50,left:100 }}>
                                    <Avatar size={90} src="https://joeschmoe.io/api/v1/random" 
                                    style={{ backgroundColor: '#fff'}} />
                                    <div style={{position:'relative',left:30}}>
                                        <div style={{fontSize:16,padding:'5px 4px',}}>{userInfo.username} </div>
                                        <LoginOutlined onClick={logout} style={{fontSize:30}}/>
                                    </div>
                                </div>
                                :
                                <Avatar size={90} icon={<UserOutlined onClick={goLogin} />} 
                                style={{position:'relative',top:50,left:100}} />
                        }
                    </Col>
                    <Col span={16} style={{marginTop:40}}>
                        <Outlet/>
                    </Col>
                </Row>
        </div>
        </>
    )
}

export default Mine;